<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '快递员管理',
  },
}
</route>

<template>
  <view class="min-h-screen bg-gray-50">
    <!-- 顶部应用图标 -->
    <view class="p-4 flex justify-center" @click="handleAddCourier()">
      <!-- 紫色方形背景 -->
      <view class="w-32 h-30 bg-#655CF3 rounded-xl flex flex-col items-center justify-between py-2">
        <!-- 白色圆形背景 -->
        <view class="w-20 h-20 bg-white rounded-full flex items-center justify-center">
          <!-- 摩托车图标用图标代替 -->
          <img src="https://kuaidi.trio.pub/upload/uniapp/delivery/tjkdy.png" alt="" />
        </view>
        <!-- 文字说明 -->
        <text class="text-4 text-white">添加快递员</text>
      </view>
    </view>

    <!-- 联系人列表 -->
    <view class="px-4 mt-4">
      <view
        v-for="(contact, index) in contacts"
        :key="index"
        class="flex items-center justify-between bg-white rounded-lg mb-3 p-4"
      >
        <!-- 左侧头像和信息 -->
        <view class="flex items-center">
          <!-- 头像占位 -->
          <view class="w-12 h-12 bg-gray-200 rounded-full flex items-center justify-center">
            <uni-icons type="person" size="24" color="#666"></uni-icons>
          </view>

          <!-- 联系人信息 -->
          <view class="ml-3">
            <view class="text-base font-medium">{{ contact.courier_name }}</view>
            <view class="text-sm text-gray-500 mt-1">{{ contact.courier_phone }}</view>
          </view>
        </view>

        <!-- 右侧电话按钮 -->
        <view
          class="w-10 h-10 bg-violet-500 rounded-full flex items-center justify-center"
          @click="handleCall(contact.phone)"
        >
          <img src="https://kuaidi.trio.pub/upload/uniapp/delivery/phone.png" alt="" />
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue'
import { onShow } from '@dcloudio/uni-app'
import { getPersonnelList } from '@/service/index/foo'
const contacts: any = ref([
  // {
  //   name: '家人01',
  //   address: '快递柜万达广场最靠新世界',
  //   phone: '13800138000',
  // },
  // {
  //   name: '家人01',
  //   address: '快递柜万达广场',
  //   phone: '13800138001',
  // },
  // {
  //   name: '家人01',
  //   address: '快递柜前度新世界',
  //   phone: '13800138002',
  // },
])
const handleAddCourier = () => {
  uni.navigateTo({
    url: '/pages/addCourier/index',
  })
}
const handleCall = (phone: string) => {
  uni.makePhoneCall({
    phoneNumber: phone,
    fail: () => {
      uni.showToast({
        title: '拨打电话失败',
        icon: 'none',
      })
    },
  })
}
onMounted(() => {
  fetchContacts()
})

onShow(() => {
  fetchContacts()
})

const fetchContacts = async () => {
  try {
    const res = await getPersonnelList({
      page: 1,
      pageSize: 10000,
    })
    console.log(res)
    // 假设接口返回的数据结构和你图片一致
    contacts.value = res.data
  } catch (error) {
    console.error('获取订单列表失败:', error)
    uni.showToast({
      title: '获取订单列表失败',
      icon: 'none',
    })
  }
}
</script>

<style lang="scss" scoped>
page {
  background-color: #f9fafb;
}
</style>
